<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #root,
      #root2 {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
      }
    </style>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/dayjs.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- 
        过滤器：
        定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
        语法：
            1.注册过滤器：
                全局过滤器：Vue.filter(name,callback)
                局部过滤器：new Vue({filters:{}})
            2.使用过滤器：{{ xxx | 过滤器名}} 或者 v-bind:属性 = "xxx | 过滤器名"  xxx表示要过滤的数据，过滤器名就是上面定义的过滤器名
        注意：过滤器并没有改变原本的数据，而是产生新的对应的数据
        过滤器可以串联调用
        过滤器传参：{{ xxx | 过滤器名(参数)}}
     -->
    <div id="root">
      <div>当前时间是：{{time}}</div>
      <!-- 过滤器格式化时间 -->
      <div>当前时间是：{{time | formatTime}}</div>
      <!-- 过滤器传参 -->
      <div>当前时间是：{{time | formatTime('YYYY年MM月DD日 HH:mm:ss')}}</div>
      <!-- 多过滤器调用 -->
      <div>
        当前年份是：{{time | formatTime('YYYY年MM月DD日 HH:mm:ss') | mySlice}}
      </div>
    </div>

    <div id="root2">
      root2
      <div>{{hello | mySlice(0,5)}}</div>
    </div>

    <script type="text/javascript">
      // 全局过滤器
      Vue.filter("mySlice", function (value, start = 0, end = 4) {
        return value.slice(start, end);
      });

      new Vue({
        el: "#root",
        data: {
          time: Date.now(),
        },
        // 局部过滤器，只能在当前vue实例中使用
        filters: {
          formatTime(value, str = "YYYY-MM-DD HH:mm:ss") {
            return dayjs(value).format(str);
          },
        },
      });

      new Vue({
        el: "#root2",
        data: {
          hello: "hello 你好",
        },
      });
    </script>
  </body>
</html>
